<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html">

    <body>

        <ui:composition template="./MainTemplate.xhtml">
            <ui:define name="head">
                <script type="text/javascript">
                ( function($) {
                    // Make tab item 'Feedback' on menu is active
                    $(document).ready( function() { $('#feedback').addClass("active"); });
                }) ( jQuery );
                </script>
            </ui:define>

            <ui:define name="title">
                FeedBack Page
            </ui:define>

            <ui:define name="left">
                <h:form prependId="false">
                    <h1 class="title">FeedBack</h1>
                    <h4 style="text-align: justify">We thank your for visiting website - Vietnam's largest Online portal for RadioCabs. Valuable feedback form our visitor has helped us to improve our site. Kindly fill out the following feedback form to tell us about your views, comments, suggestions and complaints.</h4>
                    <h:panelGrid columns="3" id="panel" >
                        <h:outputLabel value="Name: " style="font-weight: bold;"></h:outputLabel>
                        <p:inputText id="name" value="#{feedbackBean.name}" 
                                     required="true" requiredMessage="please enter your name"></p:inputText>
                        <p:message for="name"></p:message>

                        <h:outputLabel value="Mobile: " style="font-weight: bold;"></h:outputLabel>
                        <p:inputText id="mobile" value="#{feedbackBean.mobile}"
                                     required="true" requiredMessage="please enter your mobile"></p:inputText>
                        <p:message for="mobile"></p:message>

                        <h:outputLabel value="Email: " style="font-weight: bold;"></h:outputLabel>
                        <p:inputText id="email" value="#{feedbackBean.email}"
                                     required="true" requiredMessage="please enter your email"></p:inputText>
                        <p:message for="email"></p:message>

                        <h:outputLabel value="City: " style="font-weight: bold;"></h:outputLabel>
                        <p:inputText id="city" value="#{feedbackBean.city}"
                                     required="true" requiredMessage="please enter your city"></p:inputText>
                        <p:message for="city"></p:message>

                        <h:outputLabel value="Type: " style="font-weight: bold;"></h:outputLabel>
                        <h:selectOneMenu value="#{feedbackBean.type}">
                            <f:selectItem itemValue="Complaint" itemLabel="Complaint"></f:selectItem>
                            <f:selectItem itemValue="Suggestion" itemLabel="Suggestion"></f:selectItem>
                            <f:selectItem itemValue="Compliment" itemLabel="Compliment"></f:selectItem>
                        </h:selectOneMenu>
                        &nbsp;

                        <h:outputLabel value="Description: " style="font-weight: bold;margin-right: 50px"></h:outputLabel>
                        <p:inputTextarea id="description" value="#{feedbackBean.descreption}"
                                         required="true" requiredMessage="please enter your description"></p:inputTextarea>
                        <p:message for="description"></p:message>
                        &nbsp;

                    </h:panelGrid>
                    <p:commandButton ajax="false" value="Submit" action="#{feedBackController.processSubmit()}" update="panel"></p:commandButton>&nbsp;
                    <p:commandButton value="Reset" type="Reset" update="panel"/>
                </h:form>
            </ui:define>

            <ui:define name="right">
            </ui:define>

        </ui:composition>

    </body>
</html>
